<template>
	<view class="sendCode">
		<view class="sendCode-page">
			<u-navbar :border-bottom="false" back-icon-name="close" back-icon-size="50"></u-navbar>
			<view class="title1">您好！</view>
			<view class="title2">请输入手机号码</view>
			<view class="content-view">
				<view class='input-class'>
					<input type="number" v-model="phone" maxlength="11" :focus="true" placeholder="请输入手机号码" />
				</view>
				<!-- <view class="explain-view">
					<view class="select-group">
						<u-checkbox size="30" v-model="checked" active-color="#141414"></u-checkbox>
					</view>
					<view class="explain">我已同意<text>《用户协议》</text>及<text>《客户隐私权政策》</text>未注册
						手机验证后即注册</view>
				</view> -->
				<view class="get-code" :class="[checked ? 'get-code-ac':'']" @click="getCode">下一步</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				checked: true,
				Value: "", //输入的内容
			};
		},
		methods: {
			pageClose() {
				uni.navigateBack()
			},
			getCode() {
				if (!this.checked) {
					uni.showToast({
						title: '请勾选同意用户协议',
						icon: 'none',
						duration: 2000
					});
					return false
				}

				let phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/;
				if (!phoneRexp.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 2000
					});
					return false;
				} else {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/verification/verification?phone=' + this.phone
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.sendCode {
		.sendCode-page {
			padding: 0 24rpx;
			background-color: #fff;
		}

		.ico-close {
			width: 70rpx;
			height: 70rpx;
		}

		.sendCode-page .title1 {
			margin-top: 58rpx;
			font-size: 48rpx;
			line-height: 46rpx;
			color: #333333;
		}

		.sendCode-page .title2 {
			margin-top: 40rpx;
			font-size: 42rpx;
			line-height: 40rpx;
			color: #333333;
		}

		.input-class {
			padding-bottom: 32rpx;
			margin: 0 auto;
			margin-top: 136rpx;
			display: flex;
			width: 680rpx;
			border-bottom: 2rpx solid #dbdbdb;
		}

		.input-class input {
			position: relative;
			flex: 1;
			height: 52rpx;
			line-height: 52rpx;
			font-size: 32rpx;
			color: #333333;
			z-index: 1;
		}

		.input-class image {
			position: relative;
			margin-top: 1rpx;
			width: 50rpx;
			z-index: 8;
		}

		.explain-view {
			display: flex;
			margin-top: 40rpx;
		}

		.select-group {
			margin-top: 4rpx;
			width: 40rpx;
		}

		.explain {
			width: 600rpx;
			line-height: 52rpx;
			font-size: 26rpx;
			color: #999999;
		}

		.explain text {
			color: #131313;
		}

		.get-code {
			margin: 0 auto;
			margin-top: 100rpx;
			width: 670rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #131313;
			border-radius: 8rpx;
			font-size: 36rpx;
			color: #ffffff;
			text-align: center;
			opacity: 0.3;
		}

		.get-code:active {
			opacity: 0.3;
		}

		.get-code-ac {
			opacity: 1 !important;
		}
	}
</style>
